import { Select, Switch } from 'antd';
import { useState } from 'react'
import { useMount } from 'ahooks';

import { MultiRow } from '@grapecity/wijmo.react.grid.multirow';

import { MultiRowConfig } from '../Data'


const SelectOptions = [
    { value: true, label: '启用' },
    { value: false, label: '禁用' },
    { value: null, label: '不设置' },
]



const WijmoN02 = () => {

    const [Status, setStatus] = useState(true)
    const [Active, setActive] = useState(true)

    const [Data, setData] = useState()
    const [TableType, setTableType] = useState()


    const onActive = (e) => {
        setActive(e)
    }

    const onStatus = (e) => {
        setStatus(e)
    }

    useMount(() => {
        const { TableType, data } = MultiRowConfig(50)
        setData(data)
        setTableType(TableType.Detailed)
    })

    return (
        <div className="Page">
            <div className="Label">
                <label htmlFor=""> 头部状态 </label>
                <Select options={SelectOptions} defaultValue={Active} onChange={onActive} />
            </div>
            <div className="Label">
                <label htmlFor=""> 折叠按钮 </label>
                <Switch defaultChecked={Status} onChange={onStatus} />
            </div>

            <MultiRow
                itemsSource={Data}
                layoutDefinition={TableType}
                showHeaderCollapseButton={Status}
                collapsedHeaders={Active}
            />

        </div>
    );
};

export default WijmoN02